.section-ratio-bar {
  .legend-group {
    .legend-item {
      font-size: 24px;
      font-family: 'Source Han Sans CN';
      font-weight: 400;
      display: inline-flex;

      .legend-description {
        text-align: left;
      }

      .legend-name {
        color: var(--fontColor);
      }

      .legend-number {
        font-size: 32px;
        color: var(--text-color);
        font-family: 'Giorgio Sans';
      }

      .legend-unit {
        font-size: 28px;
        font-family: 'Source Han Sans CN';
        font-weight: 400;
        padding-left: 10px;
      }
    }
  }

  .legend-vertical {
    display: flex;
    justify-content: space-between;

    .legend-item {
      position: relative;
      padding-left: 22px;

      .legend-icon {
        position: absolute;
        top: 12px;
        left: 0;
        width: 12px;
        height: 12px;
      }
    }
  }

  .legend-horizontal {
    display: flex;
    justify-content: space-between;

    .legend-item {
      position: relative;
      padding-left: 22px;

      .legend-name {
        font-size: 26px;
      }

      .legend-number {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 32px;
        position: relative;
        top: -3px;
      }


      .legend-icon {
        position: absolute;
        top: 12px;
        left: 0px;
        width: 4px;
        height: 24px;
      }
    }

    .legend-description {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }

  .bar-group {
    width: 100%;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;

    .bar-item {
      height: 10px;
      border-radius: 2px;
      margin-left: 0.166666rem;

      &:first-child {
        margin-left: 0rem;
      }
    }
  }
}